import { Form, Input, Select, Space, Button, DatePicker, Avatar, Image } from "antd";
import { SearchOutlined, UserOutlined } from "@ant-design/icons";
import ThePagination from "@/components/ThePagination";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import TheDialog from "@/components/TheDialog";
import TheImage from "@/components/TheImage";
import React, { useRef, useState } from "react";
import { ExclamationCircleFilled } from "@ant-design/icons";
import Banned from "./component/Banned";
import "./style/style.less";
import { apiGetUserList, apiPetArchivesPage } from '@/request/users'
import { getDateTime3 } from '@/utils/getDate'
import _ from 'lodash';

const { RangePicker } = DatePicker;

const SearchHeader = ({ getSearchValue, resetValue }) => {
  const formRef = useRef()
  const formSubmit = value => {
    if (!_.isEmpty(value.time)) {
      value.memberCreatedTimeStart = getDateTime3(value.time[0])
      value.memberCreatedTimeEnd = getDateTime3(value.time[1])
    }
    delete (value.time)
    value = {
      ...value,
    }
    _.forIn(value, (v, k) => {
      if (!v) {
        delete (value[k])
      }
    })
    getSearchValue(value)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      memberId: '',
      wxNickName: '',
      memberMobile: '',
      memberType: null,
      memberStatus: null,
      time: []
    })
    getSearchValue({})
  };
  return (
    <div className="p-search-box service-list-sarch">
      <Form ref={formRef} onFinish={formSubmit} layout="inline">
        <Form.Item name={"memberId"}>
          <Input
            style={{ width: 120 }}
            maxLength={8}
            suffix={<SearchOutlined />}
            placeholder={"请输入ID"}
          />
        </Form.Item>
        <Form.Item name={"wxNickName"}>
          <Input
            style={{ width: 120 }}
            suffix={<SearchOutlined />}
            placeholder={"请输入昵称"}
          />
        </Form.Item>
        <Form.Item name={"memberMobile"}>
          <Input
            style={{ width: 140 }}
            suffix={<SearchOutlined />}
            placeholder={"请输入手机号"}
          />
        </Form.Item>
        <Form.Item name={"memberType"}>
          <Select
            style={{ width: 140 }}
            options={[{ value: 'R', label: "注册会员" }, { value: 'P', label: "正式会员" }, { value: 'S', label: "商户会员" }]}
            placeholder={"请选择用户身份"}
          />
        </Form.Item>
        <Form.Item name={"memberStatus"}>
          <Select
            style={{ width: 140 }}
            options={[{ value: 'Y', label: "正常" }, { value: 'N', label: '冻结' }]}
            placeholder={"请选择用户状态"}
          />
        </Form.Item>
        <Form.Item name={"time"} label="注册时间">
          <RangePicker />
        </Form.Item>
        <Form.Item>
          <Space size="small" style={{ marginLeft: 10 }}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

class List extends React.Component {
  state = {
    columns: [
      {
        title: "ID",
        dataIndex: "memberId",
        key: "memberId",
      },
      {
        title: "头像",
        dataIndex: "memberAvatar",
        key: "memberAvatar",
        render: (text) => {
          if (text) {
            return <Avatar src={<Image src={text} />} />
          } else {
            return <Avatar icon={<UserOutlined />} />
          }
        }
      },
      {
        title: "昵称",
        dataIndex: "nickName",
        key: "nickName",
      },
      {
        title: "手机号",
        dataIndex: "memberMobile",
        key: "memberMobile",
      },
      {
        title: "身份",
        dataIndex: "memberType",
        key: "memberType",
        render: (text, render) => {
          let label = ''
          switch (text) {
            case 'R':
              label = '注册会员'
              break;
            case "P":
              label = '正式会员'
              break;
            case "S":
              label = "商户会员"
              break;
            default:
              label = "返回值错误"
          }
          return label;
        }
      },
      {
        title: "状态",
        dataIndex: "memberStatus",
        key: "memberStatus",
        render: text => {
          let label = ''
          switch (text) {
            case 'Y':
              label = '正常'
              break
            case 'N':
              label = '冻结'
              break
            default:
              label = '返回值错误'
          }
          return label;
        }
      },
      {
        title: "注册时间",
        dataIndex: "memberCreatedTime",
        key: "memberCreatedTime",
      },
      {
        title: "操作",
        fixed: "right",
        render: (text, render) => {
          return (
            <div>
              <TheButton haspermi={['coupons:user:send']} onClick={() => this.openDialog("account", render.memberId)}>发放优惠券</TheButton>
            </div>
          );
        },
      },
    ],
    data: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    accountVisible: false,
    releaseVisible: false,
    searchValue: {},
    type: '',
    memberId: '',
    petVisible: false,
    petData: [1],
    petLoading: false
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    this.setState({ loading: true })
    const { searchValue, pageData } = this.state;
    let data = await apiGetUserList({ ...searchValue, ...pageData })
    if (data.code === 0 && data) {
      this.setState({
        data: data.data,
        pageData: {
          pageNo: data.pageNo,
          pageSize: data.pageSize
        },
        total: data.totalCount,
        loading: false
      })
    } else {
      this.setState({ loading: false })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({ pageData: { pageNo, pageSize } }, () => {
      this.getData()
    })
  };
  openAdd = () => {
    this.setState({ visible: true });
  };
  dialogCancel = () => {
    this.setState({ visible: false });
  };
  openDialog = (value, memberId) => {
    this.setState({ [`${value}Visible`]: true, type: value, memberId });
  };
  dialogClose = () => {
    this.setState({ accountVisible: false, releaseVisible: false });
  };
  getSearchValue = value => {
    this.setState({ searchValue: value, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }
  resetValue = () => {
    this.setState({ searchValue: {} }, () => {
      this.getData()
    })
  }
  openPetDialog = async (value) => {
    this.setState({ petLoading: true })
    const { memberId } = value
    let res = await apiPetArchivesPage({ memberId, pageNo: 1, pageSize: 10000 })
    if (res.data && res.code === 0) {
      this.setState({
        petData: res.data,
        petVisible: true
      })
    }
    this.setState({ petLoading: false })
  }
  petHandleCancel = () => {
    this.setState({ petVisible: false })
  }
  render() {
    const { columns, data, pageData, total, accountVisible, releaseVisible, type, memberId, loading, petVisible, petColumns, petData, petLoading } =
      this.state;
    return (
      <div className="p-layout-box commodity-examine">
        <SearchHeader openAdd={this.openAdd} getSearchValue={this.getSearchValue} resetValue={this.resetValue} />
        <div className="p-layout-content-pagination">
          <TheTable
            scroll={{ x: "max-content", y: '63vh' }}
            columns={columns}
            dataSource={data}
            loading={loading}
          />
          <ThePagination
            pageNo={pageData.pageNo}
            pageSize={pageData.pageSize}
            total={total}
            pageChange={this.pageChange}
          />
          <TheDialog
            title={
              <div>
                <ExclamationCircleFilled
                  style={{ color: "#FAAD14", marginRight: 10 }}
                />
                发放优惠券
              </div>
            }
            visible={accountVisible}
            handleCancel={this.dialogClose}
            footer={null}
            width={400}
          >
            <Banned dialogClose={this.dialogClose} type={type} reload={this.getData} memberId={memberId} />
          </TheDialog>
        </div>
      </div>
    );
  }
}

export default List;
